<template>
	<div>
		<ProTable ref="proTable" title="地址库管理" :columns="columns" :requestApi="getTableList" :init-param="initParam">
			<template #tableHeader>
				<div class="mt16">
					<el-button class="mb0" type="primary" v-auth="'order:address:create:invoke'" @click="openUpdate()"> 新增快递地址 </el-button>
				</div>
			</template>

			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>

			<!-- 表格操作 -->
			<template #operation="{ row }">
				<el-button type="primary" v-auth-all="['order:address:edit:invoke', 'order:address:details:invoke']" link @click="openUpdate(row)">
					编辑
				</el-button>
				<el-divider direction="vertical" v-auth-all="['order:address:edit:invoke', 'order:address:details:invoke']" />
				<el-button type="primary" link v-auth="'order:address:delete:invoke'" @click="onDelete(row)"> 删除 </el-button>
			</template>
		</ProTable>
		<Update :visible="updateVisible" :row="updateRow" @handleClose="closeImport"></Update>
	</div>
</template>

<script setup lang="tsx" name="orderAddress">
import { onMounted, ref, reactive } from 'vue';
import { NextLoading } from '/@/utils/loading';
import ProTable from '../../../../components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '../../../../components/ProTable/interface';
import { fetchAddressList, fetchDelAddress, fetchAddressDetail } from '/@/api/order';
import Update from './dialog/update.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	return fetchAddressList(params);
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'name',
		label: '联系姓名',
	},
	{
		prop: 'phone',
		label: '联系电话',
		minWidth: 120,
	},
	{
		prop: 'detail',
		label: '联系地址',
		minWidth: 200,
	},
	{
		prop: 'zipCode',
		label: '邮编',
	},
	{ prop: 'operation', label: '操作', fixed: 'right', width: 120, align: 'left' },
];

const updateVisible = ref(false);
const updateRow = ref();

const openUpdate = async (row?: any) => {
	if (row) {
		const res = await fetchAddressDetail({ id: row.id });
		if (res.code == 200) {
			const data = res.data;
			data.address = [data.province, data.city, data.district];
			updateRow.value = data;
			updateVisible.value = true;
		}
	} else {
		updateVisible.value = true;
	}
};

const closeImport = (success: boolean) => {
	if (success) {
		proTable.value?.getTableList();
	}
	updateVisible.value = false;
	updateRow.value = null;
};

const onDelete = async (row: any) => {
	ElMessageBox.confirm('确认删除该地址?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await fetchDelAddress({ id: row.id });
		if (res.code == 200) {
			ElMessage.success('删除成功');
			proTable.value?.getTableList();
		}
	});
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style lang="scss">
.demo-tabs {
	.el-tabs__header {
		margin-bottom: 0;
	}
}
</style>
